<template>
    <nav>
        <el-row>
            <el-col :span="4" class="text-left">
                <img class="nav-logo" src="../../public/img/com/logo.jpg">
            </el-col>
            <el-col :span="20">
                <el-row>
                    <el-col :span="18">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                                 @select="handleSelect">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">关于我们</template>
                                <el-menu-item index="2-1">组织简介</el-menu-item>
                                <el-menu-item index="2-2">组织架构</el-menu-item>
                                <el-menu-item index="2-3">组织文化</el-menu-item>
                                <el-menu-item index="2-4">名誉顾问</el-menu-item>
                                <el-menu-item index="2-5">法律顾问</el-menu-item>
                                <el-menu-item index="2-6">理事长寄语</el-menu-item>
                                <el-menu-item index="2-7">事记</el-menu-item>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">公益项目</template>
                                <el-menu-item index="3-1">活动介绍</el-menu-item>
                                <el-menu-item index="3-1">发起活动</el-menu-item>
                                <el-menu-item index="3-1">团体登记</el-menu-item>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title">公益团队</template>
                                <el-menu-item index="4-1">团队介绍</el-menu-item>
                                <el-menu-item index="4-2">团队申请</el-menu-item>
                            </el-submenu>
                            <el-submenu index="5">
                                <template slot="title">部门</template>
                                <el-menu-item index="5-1">常规公益活动服务部</el-menu-item>
                                <el-menu-item index="5-2">办公室</el-menu-item>
                                <el-menu-item index="5-3">培训部</el-menu-item>
                                <el-menu-item index="5-4">项目部</el-menu-item>
                                <el-menu-item index="5-5">文体部</el-menu-item>
                                <el-menu-item index="5-6">信息部</el-menu-item>
                                <el-menu-item index="5-7">国际公益部</el-menu-item>
                                <el-menu-item index="5-8">人力资源部</el-menu-item>
                                <el-menu-item index="5-9">义工权益部</el-menu-item>
                            </el-submenu>
                            <el-submenu index="6">
                                <template slot="title">合作伙伴</template>
                                <el-menu-item index="6-1">合作伙伴</el-menu-item>
                                <el-menu-item index="6-2">合作邀请</el-menu-item>
                            </el-submenu>
                            <el-submenu index="7">
                                <template slot="title">下载中心</template>
                                <el-menu-item index="7-1">内部文件</el-menu-item>
                                <el-menu-item index="7-2">政策法规</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="8"><a href="https://www.wjx.com/m/20219987.aspx" target="_blank">注册</a>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="6">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="">
                                <el-input v-model="formInline.keywords" placeholder="请输入关键字"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-icon class="icon el-icon-search" type="primary" @click="onSubmit">查询</el-icon>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>

    </nav>

</template>

<script>

    export default {
        name: "MainNav",
        components: {
            // ElementUI
        },
        data() {
            return {
                formInline: {
                    keywords: '',
                    region: ''
                }
            }
        },
        props:{
            activeIndex:0
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            handleSelect(){

            }
        }
    }
</script>

<style >
    :root {
        --red-main: #e81e1f; /*ä¸»é¢˜è‰²â€”â€”æ¿€æ´»æŒ‰é’®ç­‰*/
        --blue-main: #40aafb; /*ä¸»é¢˜å¯¹æ¯”è‰²*/
        --gray-light-border:#dee2e6;
        --gray-light-bg: #b2b2b2; /*æµ…ç°è‰²èƒŒæ™¯â€”â€”æœªæ¿€æ´»èœå•*/
        --gray-dark-bg: #292929; /*æ·±ç°è‰²èƒŒæ™¯â€”â€”è„šéƒ¨èƒŒæ™¯*/
        --title-main: #171717; /*æ–‡æœ¬æ ‡é¢˜*/
        /*--text-main: #0e0509; !*ä¸»è¦æ–‡æœ¬å†…å®¹*!*/
        --text-main: #4d4d4d; /*ä¸»è¦æ–‡æœ¬å†…å®¹*/
        --text-explain: #4c4c4c; /*è§£é‡Šæ€§æ–‡æœ¬å†…å®¹â€”â€”æœªæ¿€æ´»å¯¼èˆªæ–‡å­—,å¡ç‰‡ä¸­æ–‡æœ¬å†…å®¹*/
        --body-bg: #f7f7f7; /*æ•´ä¸ªé¡µé¢çš„èƒŒæ™¯è‰²*/
    }
    .text-left{
        text-align: left;
    }
    nav{
        /*outline: 1px dashed skyblue;*/
    }
    nav .nav-logo{
        position: relative;
        top: .25rem;
        left: .25rem;
        height: 3rem;
    }
    ul.el-menu.el-menu--horizontal {
         border-bottom: none;
    }
    ul.el-menu--horizontal>.el-menu-item,
    ul.el-menu--horizontal>.el-submenu .el-submenu__title{
        padding: 0 .5rem;
        font-size: 1rem;

    }
    ul.el-menu--horizontal>.el-submenu.is-active li.el-menu-item,
    ul.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
        /*background: blue;*/
    }
    ul.el-menu--horizontal>.el-menu-item.is-active,
    ul.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
        border-bottom: .25rem solid var(--red-main);
    }
    form.el-form.demo-form-inline.el-form--inline{
        padding-top: .5rem;
    }
    .el-form--inline .el-form-item{
        margin-bottom: 12px;
    }

    i.icon.el-icon-search.el-icon-undefined {
        cursor: pointer;
    }
    i.icon.el-icon-search.el-icon-undefined:hover {
        font-weight: bold;
    }
</style>